<template>
	<view class="sleep" :style="{paddingTop: paddingHeight + 'px'}">
		<nav-bar></nav-bar>
		<view class="t-h-container">
			<view class="t-h-title">
				睡眠记录
			</view>
			<view class="t-h-sub-title">
				请选择您本次清晨测量所对比的睡前测量记录，本次测量的清晨测量将与所选项形成趋势对比
			</view>
			<view class="record_l">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="goConnect(item.id)">
					<view class="level" :style="{backgroundColor: getBgColor(item.rerLevel)}">
						{{ item.rerLevel }}
					</view>
					<view class="type">
						睡前
					</view>
					<view class="time">
						{{ item.measureTime }}
					</view>
				</view>
			</view>
		</view>
		<view class="large_button" @click="goConnect('')">
			跳过
		</view>
	</view>
</template>

<script>
	import {
		findFrontSleepRecord
	} from '@/api/index.js'
	import {
		getItemColor
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				paddingHeight: uni.getStorageSync('navbarHeight'),
				userId: uni.getStorageSync("userId"),
				minHeight: 0,
				tag: undefined,
				dataList: []
			}
		},
		onLoad(OPTIONS) {
			this.tag = OPTIONS.tag
			this.fetchData()
		},
		methods: {
			async fetchData() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					userId: this.userId
				}
				try {
					const res = await findFrontSleepRecord(params)
					if (res.code == 200) {
						if (res.data.length) {
							this.dataList = res.data
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			// 跳转连接
			goConnect(id) {
				if (id) { // 餐后测量携带某一个餐前记录id
					uni.redirectTo({
						url: `/pagesA/health/device/connect/index?tag=${this.tag}&recordId=${id}`
					})
				} else {
					uni.redirectTo({
						url: `/pagesA/health/device/connect/index?tag=${this.tag}`
					})
				}
			},
			getBgColor(data) {
				return getItemColor(data)
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #FAFAFA;
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	.sleep {
		.record_l {
			margin-top: 48rpx;

			.r_t {
				color: #333333;
				font-size: 24rpx;
				padding-bottom: 16rpx;
			}

			.item {
				width: 100%;
				height: 118rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				padding: 0 48rpx 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: #666666;

				.level {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					line-height: 64rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					background-color: #9c70de;
				}

				.type {
					flex: 1;
					padding-left: 16rpx;
					text-align: left;
				}
			}
		}

		.large_button {
			position: fixed;
			bottom: 76rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>